<template>
  <div style="padding: 0 .667rem; margin-bottom: .667rem;">
    <div class="payBoxTop whiteBg">
      <p class="aaa" @click="useCheck()">
        <i v-if="item.isChecked" class="iconfont icon-checked color_red"></i>
        <i v-else class="iconfont icon-02-copy color_gray_03"></i>
      </p>
      <div>
        <div v-if="item.type" class="couponDiv" :class="{'coupon_yellow':item.type=='cash','coupon_green':item.type=='rebate','coupon_blue':item.type=='voucher','coupon_orange':item.type=='present','coupon_purple':item.type=='ticket'}">
          <div class="_num" :class="{'coupon_color_y':item.type=='cash','coupon_color_g':item.type=='rebate','coupon_color_b':item.type=='voucher','coupon_color_o':item.type=='present','coupon_color_p':item.type=='ticket'}">Coupon</div>
          <div class="_num_price">
            <coupon-num :num="item.denomination" :type="item.type"></coupon-num>
          </div>
          <div class="coupon_type">{{item.type | couponTp}}</div>
        </div>
        <div class="card_info">
          <div v-if="!$route.query.couponParam" class="card_name">
            {{item.name}}
          </div>
          <div v-if='$route.query.couponParam' class="card_name">
            {{item.couponName}}
          </div>
          <div class="coupon_info_item">
            <star :couponComScore="item.comScore"></star>
            <p class="info_pad" >{{item.comNum}}条 &nbsp;&nbsp;&nbsp;&nbsp;{{item.type | couponTp}}<b v-if="!$route.query.couponParam" class="red_color"> {{item.num}} </b><b v-if="$route.query.couponParam" class="red_color"> {{item.num}} </b>张</p>
          </div>
          <div class="clear"></div>
          <div class="coupon_info_item color_gray">
            <img v-if="item.promAppro=='buy'" style="width: 1rem;height:1rem;z-index: 4;" src="../../images/cashIcon.png" />
            <span>已售出  &nbsp;&nbsp;{{item.soldnum}}  &nbsp;已使用  &nbsp;&nbsp;{{item.usednum}}</span>
          </div>
        </div>
      </div>
    </div>
    <img src="../../images/payCoupon.png" style="max-width: 100%;">
    <div class="payBoxBot whiteBg" @click="goCouponDetl(item)">
      <i class="icon iconfont icon-right right" style="font-size: 16px;"></i> 使用须知
    </div>
  </div>
</template>

<script>
import star from 'src/componentes/global/star.vue'
import { Storage } from 'src/utils/storage.js'
import couponNum from 'src/componentes/global/couponNum.vue'
export default {
  name: 'used-coupon',
  components: {star, couponNum},
  data: () => ({
    isChecked: false
  }),
  props: {
    item: Object,
    default: () => ({}),
    num: Number
  },
  methods: {
    useCheck() {
      this.$emit("checkedCoupon", this.num, this.item)
    },
    goCouponDetl(params) {
      Storage.set("couponInfo", params);
      this.$router.push({
        name: 'couDetail',
        query: {
          type: 'noExchange',
          couponId: params.couponId,
          mchtId: params.mchtId,
          seq: params.seqNo || '',
          usrId: '',
          usrPicId: ''
        }
      });
    }
  }
}
</script>

<style lang="css" scoped>
.payBoxTop {
  border-top-left-radius: .2rem;
  border-top-right-radius: .2rem;
  overflow: hidden;
  padding: 0.5rem .667rem 0;
  position: relative;
}

.payBoxBot {
  border-bottom-left-radius: .2rem;
  border-bottom-right-radius: .2rem;
  padding: 0 .667rem;
  font-size: .8rem;
  color: #333;
  line-height: 2rem;
  margin-top: -0.245rem;
}

.payBoxBot .icon {
  color: #727272;
}


.payCouponList .move {
  -webkit-transform: translate(-4rem, 0);
  overflow: visible;
}

.iconBox {
  position: absolute;
  padding-left: .667rem;
  text-align: center;
  right: -4.667rem;
  top: 0;
  width: 4.667rem;
  background: #3f3f3f;
  height: 100%;
  z-index: -1;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: column;
}

.iconBox .iconfont {
  color: #ec4e8a;
  font-weight: bold;
  font-size: 1.2rem;
  display: block;
  margin: 0 auto;
}

.pay_coupon_num {
  display: block;
  font-size: 1.2rem;
  margin: 0 auto;
  color: #ec4e8a;
  height: 4rem;
  line-height: 4rem;
}

.grayTxt .pay_coupon_num,
.grayTxt .icon-jianshao- {
  color: #999;
}
.aaa{
	position: absolute;
	right: 1rem;
	top: 3rem;
}
.aaa i{
  font-size: 18px;
}
</style>
